<template>
  <div style="">
    <el-tabs v-model="status" style="width: 1150px" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="0">
        <div>
          <span style="margin-left: 10px">订单编号：</span>
          <el-input v-model="id" placeholder="请输入订单号" style="width: 200px"/>
          <span style="margin-left: 10px">评价状态：</span>
          <el-select v-model="isComment" clearable placeholder="请选择评价状态">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <br/> <br/>
          <span>下单时间：</span>
          <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span style="margin-left: 5px;margin-right: 5px">至</span>
          <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <el-button type="primary" round style="margin-left: 100px" @click="selectAllOrderByAccountId">
            查询
          </el-button>
        </div>
        <div>
          <el-table :data="orderList" stripe style="width: 100%;margin-top:20px ">
            <el-table-column prop="orderId" label="订单号" width="200" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="100" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单日期" width="200" align="center">
            </el-table-column>
            <el-table-column label="交易状态" prop="status" width="400" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0" style="text-align: center">订单已取消</span>
                <span v-if="scope.row.status==1">买家待付款</span>
                <span v-if="scope.row.status==2">卖家待接单</span>
                <span v-if="scope.row.status==3">卖家待发货</span>
                <span v-if="scope.row.status==4">买家待接收</span>
                <span v-if="scope.row.status==5">买家已接收</span>
                <p style="margin-top: 10px" role="button">
                  <a @click="toOrderItem(scope.row.orderId)"
                     style="color: blue">
                    订单详情
                  </a>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" v-if="scope.row.status==1" @click="toCheckOut(scope.row.orderId)">去付款
                </el-button>
                <el-button type="danger" v-if="scope.row.status==1" @click="deleteOrderByOrderId(scope.row.orderId)">
                  取消订单
                </el-button>
                <el-button type="success" v-if="scope.row.status==4" @click="receive(scope.row.orderId)">确认接收
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>


      <el-tab-pane label="待支付" name="1">
        <div>
          <span style="margin-left: 10px">订单编号：</span>
          <el-input v-model="id" placeholder="请输入订单号" style="width: 200px"/>
          <span style="margin-left: 10px">评价状态：</span>
          <el-select v-model="isComment" clearable placeholder="请选择评价状态">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <br/> <br/>
          <span>下单时间：</span>
          <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span style="margin-left: 5px;margin-right: 5px">至</span>
          <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <el-button type="primary" round style="margin-left: 100px" @click="selectAllOrderByAccountId">
            查询
          </el-button>
        </div>
        <div>
          <el-table :data="orderList" stripe style="width: 100%;margin-top:20px ">
            <el-table-column prop="orderId" label="订单号" width="200" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="100" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单日期" width="200" align="center">
            </el-table-column>
            <el-table-column label="交易状态" prop="status" align="center" width="400">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0" style="text-align: center">订单已取消</span>
                <span v-if="scope.row.status==1">买家待付款</span>
                <span v-if="scope.row.status==2">卖家待接单</span>
                <span v-if="scope.row.status==3">卖家待发货</span>
                <span v-if="scope.row.status==4">买家待接收</span>
                <span v-if="scope.row.status==5">买家已接收</span>
                <p style="margin-top: 10px">
                  <a @click="toOrderItem(scope.row.orderId)"
                     style="color: blue">
                    订单详情
                  </a>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" v-if="scope.row.status==1" @click="toCheckOut(scope.row.orderId)">去付款
                </el-button>
                <el-button type="danger" v-if="scope.row.status==1" @click="deleteOrderByOrderId(scope.row.orderId)">
                  取消订单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>


      <el-tab-pane label="待接单" name="2">
        <div>
          <span style="margin-left: 10px">订单编号：</span>
          <el-input v-model="id" placeholder="请输入订单号" style="width: 200px"/>
          <span style="margin-left: 10px">评价状态：</span>
          <el-select v-model="isComment" clearable placeholder="请选择评价状态">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <br/> <br/>
          <span>下单时间：</span>
          <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span style="margin-left: 5px;margin-right: 5px">至</span>
          <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <el-button type="primary" round style="margin-left: 100px" @click="selectAllOrderByAccountId">
            查询
          </el-button>
        </div>
        <div>
          <el-table :data="orderList" stripe style="width: 100%;margin-top:20px ">
            <el-table-column prop="orderId" label="订单号" width="200" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="180" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单日期" width="200" align="center">
            </el-table-column>
            <el-table-column label="交易状态" prop="status" width="400px" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0" style="text-align: center">订单已取消</span>
                <span v-if="scope.row.status==1">买家待付款</span>
                <span v-if="scope.row.status==2">卖家待接单</span>
                <span v-if="scope.row.status==3">卖家待发货</span>
                <span v-if="scope.row.status==4">买家待接收</span>
                <span v-if="scope.row.status==5">买家已接收</span>
                <p style="margin-top: 10px">
                  <a @click="toOrderItem(scope.row.orderId)"
                     style="color: blue">
                    订单详情
                  </a>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>


      <el-tab-pane label="待发货" name="3">
        <div>
          <span style="margin-left: 10px">订单编号：</span>
          <el-input v-model="id" placeholder="请输入订单号" style="width: 200px"/>
          <span style="margin-left: 10px">评价状态：</span>
          <el-select v-model="isComment" clearable placeholder="请选择评价状态">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <br/> <br/>
          <span>下单时间：</span>
          <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span style="margin-left: 5px;margin-right: 5px">至</span>
          <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <el-button type="primary" round style="margin-left: 100px" @click="selectAllOrderByAccountId">
            查询
          </el-button>
        </div>
        <div>
          <el-table :data="orderList" stripe style="width: 100%;margin-top:20px ">
            <el-table-column prop="orderId" label="订单号" width="200" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="180" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单日期" width="200" align="center">
            </el-table-column>
            <el-table-column label="交易状态" prop="status" width="400px" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0" style="text-align: center">订单已取消</span>
                <span v-if="scope.row.status==1">买家待付款</span>
                <span v-if="scope.row.status==2">卖家待接单</span>
                <span v-if="scope.row.status==3">卖家待发货</span>
                <span v-if="scope.row.status==4">买家待接收</span>
                <span v-if="scope.row.status==5">买家已接收</span>
                <p style="margin-top: 10px">
                  <a @click="toOrderItem(scope.row.orderId)"
                     style="color: blue">
                    订单详情
                  </a>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>


      <el-tab-pane label="已发货" name="4">
        <div>
          <span style="margin-left: 10px">订单编号：</span>
          <el-input v-model="id" placeholder="请输入订单号" style="width: 200px"/>
          <span style="margin-left: 10px">评价状态：</span>
          <el-select v-model="isComment" clearable placeholder="请选择评价状态">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <br/> <br/>
          <span>下单时间：</span>
          <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span style="margin-left: 5px;margin-right: 5px">至</span>
          <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <el-button type="primary" round style="margin-left: 100px" @click="selectAllOrderByAccountId">
            查询
          </el-button>
        </div>
        <div>
          <el-table :data="orderList" stripe style="width: 100%;margin-top:20px ">
            <el-table-column prop="orderId" label="订单号" width="200" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="180" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单日期" width="200" align="center">
            </el-table-column>
            <el-table-column label="交易状态" prop="status" width="400px" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0" style="text-align: center">订单已取消</span>
                <span v-if="scope.row.status==1">买家待付款</span>
                <span v-if="scope.row.status==2">卖家待接单</span>
                <span v-if="scope.row.status==3">卖家待发货</span>
                <span v-if="scope.row.status==4">买家待接收</span>
                <span v-if="scope.row.status==5">买家已接收</span>
                <p style="margin-top: 10px">
                  <a @click="toOrderItem(scope.row.orderId)"
                     style="color: blue">
                    订单详情
                  </a>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="success" v-if="scope.row.status==4" @click="receive(scope.row.orderId)">确认接收
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>


      <el-tab-pane label="已收货" name="5">
        <div>
          <span style="margin-left: 10px">订单编号：</span>
          <el-input v-model="id" placeholder="请输入订单号" style="width: 200px"/>
          <span style="margin-left: 10px">评价状态：</span>
          <el-select v-model="isComment" clearable placeholder="请选择评价状态">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <br/> <br/>
          <span>下单时间：</span>
          <el-date-picker
              v-model="startTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span style="margin-left: 5px;margin-right: 5px">至</span>
          <el-date-picker
              v-model="endTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <el-button type="primary" round style="margin-left: 100px" @click="selectAllOrderByAccountId">
            查询
          </el-button>
        </div>
        <div>
          <el-table :data="orderList" stripe style="width: 100%;margin-top:20px ">
            <el-table-column prop="orderId" label="订单号" width="200" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="180" align="center">
              <template slot-scope="scope">
                <span>￥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单日期" width="200" align="center">
            </el-table-column>
            <el-table-column label="交易状态" prop="status" width="400px" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0" style="text-align: center">订单已取消</span>
                <span v-if="scope.row.status==1">买家待付款</span>
                <span v-if="scope.row.status==2">卖家待接单</span>
                <span v-if="scope.row.status==3">卖家待发货</span>
                <span v-if="scope.row.status==4">买家待接收</span>
                <span v-if="scope.row.status==5">买家已接收</span>
                <p style="margin-top: 10px">
                  <a @click="toOrderItem(scope.row.orderId)"
                     style="color: blue">
                    订单详情
                  </a>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!--分页插件-->
    <div class="block" style="margin-left: 350px;margin-top: 100px;margin-bottom: 80px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=pageNum
          :page-sizes="[5,10]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "OrderView",
  data() {
    return {
      accountId: '2',
      accountName: 'jack',

      pageNum: 1,
      pageSize: 5,
      total: 0,

      orderList: [],
      status: "0",
      options: [
        {value: "2", label: "查看所有"},
        {value: "0", label: "未评价"},
        {value: "1", label: "已评价"},
      ],

      id: "",
      isComment: '2',
      startTime: "",
      endTime: "",
    }
  },
  created() {
    this.getLogin();
    this.selectAllOrderByAccountId();
  },
  methods: {
    getLogin() {
      this.accountId = sessionStorage.getItem("accountId");
      this.accountName = sessionStorage.getItem("accountName");
    },
    // 改变标签页
    handleClick(tab) {
      this.status = tab.name;
      this.pageNum = 1;
      this.selectAllOrderByAccountId();
    },
    // 查询用户订单
    selectAllOrderByAccountId() {
      this.$axios.get("/flowerOrder/selectAllOrderByAccountId", {
        params: {
          accountId: this.accountId,
          orderId: this.id,
          isComment: this.isComment,
          startTime: this.startTime,
          endTime: this.endTime,
          status: this.status,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(res => {
        this.orderList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    // 分页相关
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectAllOrderByAccountId();
      this.pageNum = 1;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.selectAllOrderByAccountId();
      this.pageNum = 1;
    },
    // 前往结算页面
    toCheckOut(orderId) {
      sessionStorage.setItem("orderId", orderId);
      this.$router.push("/checkout");
    },
    // 前往订单详情
    toOrderItem(orderId) {
      sessionStorage.setItem("orderId", orderId);
      this.$router.push("/orderItem");
    },
    // 确认收货
    receive(orderId) {
      let params = new URLSearchParams;
      params.append("orderId", orderId);
      this.$axios.post("/flowerOrder/updateStatusByOrderId", params)
          .then(res => {
            if (res.data.code == 200) {
              Message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              });
              this.selectAllOrderByAccountId();
            } else {
              Message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },
    // 取消订单
    deleteOrderByOrderId(orderId) {
      let params = new URLSearchParams;
      params.append("orderId", orderId);
      this.$axios.post("/flowerOrder/deleteOrderByOrderId", params)
          .then(res => {
            if (res.data.code == 200) {
              Message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              });
              this.selectAllOrderByAccountId();
            } else if (res.data.code == 900) {
              Message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              });
              this.selectAllOrderByAccountId();
            } else {
              Message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },
  }
}
</script>
<style>
p[role="button"] {
  cursor: pointer;
  text-decoration: underline;
}

/* 可以添加到样式表中 */
p[role="button"]:hover {
  transform: scale(1.05); /* 轻微放大效果 */
}
</style>